<template>
  <div class="course-page">
    <div class="course-main">
      <MenuLocation
        :title="'课程中心 / 详情'"
        style="margin-left: 20px"
      ></MenuLocation>
      <div class="course-header">
        <div class="course-photo">
          <img :src="playInfo.expertFace" />
        </div>
        <div>{{ playInfo.expertName }}</div>
        <!-- <div class="course-follow" @click="follow">
          <img src="../../assets/course/follow.png" />
          {{ $route.query.expertIsSub === "1" ? "已关注" : "关注" }}
        </div> -->
        <div class="course-title">{{ $route.query.courseName }}</div>
      </div>
      <div class="course-content">
        <div class="course-left">
          <div class="course-subtitle">
            当前播放：{{ playInfo.courseName || "--" }}
          </div>
          <video
            ref="video"
            id="video"
            :src="playInfo.sourcePath"
            :poster="playInfo.coverPath"
            controls
            controlslist="nodownload"
            @timeupdate="timeupdate"
            @ended="ended"
            @loadedmetadata="loadedmetadata"
          ></video>
          <div class="course-footer">
            <div>
              <!-- <div
                @click="collection"
                :class="{ highLight: playInfo.collection }"
              >
                <Icon type="md-star" :size="16" />收藏
              </div> -->
              <!-- <div
                @click="encourage"
                :class="{ highLight: playInfo.encourage }"
              >
                <Icon type="ios-thumbs-up" :size="16" />点赞
              </div>
              <div @click="share(playInfo)">
                <Icon type="ios-share-alt" :size="16" />分享
              </div> -->
            </div>
            <div>
              {{ $route.query.courseWatchCount || 0 }} 浏览量 |
              {{ $route.query.learnNum || 0 }} 人学习
            </div>
          </div>
        </div>
        <div class="course-right">
          <div class="course-progress">
            <div>学习总进度</div>
            <Progress
              :percent="Number($route.query.loading) * 100"
              :stroke-width="14"
              :stroke-color="['#0DCCFF', '#4760FF']"
            />
          </div>
          <div
            v-for="(i, k) in studyList"
            :key="k"
            class="course-study"
            @click="playVideo(i)"
          >
            <div>{{ i.sort + 1 }}.</div>
            <div>
              <div>{{ i.courseName }}</div>
              <div>
                <img :src="i.playing ? video2 : video" alt="" />
                <span>{{ i.fileName }}</span>
                <!-- <span>{{ $options.filters.getHMS(i.courseDuration) }}</span> -->
                <!-- <img
                  v-if="i.progress != 100 && i.progress != 0"
                  src="../../assets/course/progress.png"
                /> -->
              </div>
            </div>
            <span @click="dfLoad(i)">下载</span>
            <div>
              <!-- <img
                v-if="i.progress == 100"
                src="../../assets/course/finish.png"
              /> -->
              <!-- <i-circle :percent="Number(i.loading)" stroke-color="#49AE9C">
                <Icon
                  v-if="i.loading == '100'"
                  type="ios-checkmark"
                  size="16"
                  style="color: #49ae9c"
                ></Icon>
              </i-circle> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MenuLocation from "@/components/myComponents/menuLocation.vue";
import {
  updateWatchRecord,
  getObjByCourseId,
  getCourseByCourseSeriesId,
  toCollect,
  saveIdol,
} from "@/api/course.js";
import video2 from "@/assets/course/video2.png";
import video from "@/assets/course/video.png";
export default {
  components: {
    MenuLocation,
  },
  data() {
    return {
      info: {},
      playInfo: {}, //当前播放
      studyList: [],
      video2: video2,
      video: video,
    };
  },

  beforeDestroy() {
    this.updatePlayRecord();
  },
  created() {
    this.getInfo(this.$route.query.id);
    this.getCourseList();
  },
  methods: {
    dfLoad(file) {
      this.getBlob(file.sourcePath).then(blob => {
        this.DownloadItem(blob, file.fileName + file.sourceType);
      });
    },
    getBlob(url) {
      return new Promise(resolve => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = () => {
          if (xhr.status === 200) {
            resolve(xhr.response);
          }
        };
        xhr.send();
      });
    },
    DownloadItem(blob,fileName){
      let link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = fileName;
      link.click();
    },
    //获取基本信息
    getInfo(id) {
      getObjByCourseId(id).then((res) => {
        this.playInfo = res.result;
      });
    },
    //获取课程信息列表
    getCourseList() {
      getCourseByCourseSeriesId(this.$route.query.courseId).then((res) => {
        res.result.forEach((ele) => {
          ele.playing = ele.id == this.$route.query.id ? true : false;
        });
        this.studyList = res.result;
      });
    },
    // 播放视频
    playVideo(val) {
      this.studyList.forEach((i) => {
        if (val.id == i.id) {
          i.playing = true;
          this.getInfo(val.id);
        } else {
          i.playing = false;
        }
      });
    },

    //监听当前播放时间
    timeupdate(e) {
      this.currentTime = e.target.currentTime;
    },
    //播放结束了
    ended(e) {
      if (e.target.ended) {
        this.updatePlayRecord();
      }
    },
    //进入页面时监听当前播放的位置
    loadedmetadata() {
      this.$nextTick(() => {
        this.$refs.video.currentTime = Number(this.$route.query.playTime);
      });
    },
    //更新播放进度
    updatePlayRecord() {
      updateWatchRecord({
        courseId: this.playInfo.id,
        playTime: this.currentTime,
      }).then((res) => {});
    },

    // 收藏
    collection() {
      // this.playInfo.collection = !this.playInfo.collection;
      //点击确定收藏
      toCollect({
        relationId: this.$route.query.courseId,
        typeId: "1002001",
      }).then(({ code, result }) => {
        if (code === 200 && result) {
          this.$Message.success("收藏成功");
        }
      });
    },
    // 点赞
    encourage() {
      this.playInfo.encourage = !this.playInfo.encourage;
    },
    // 分享
    share(val) {
      console.log(val);
    },
  },
};
</script>
<style lang="scss" scoped>
.course-page {
  min-height: calc(100vh - (80 / 1920 * 100vw));
  .course-main {
    padding: 0px;
    .course-header {
      background: #fff;
      height: calc(90 / 1920 * 100vw);
      padding: calc(26 / 1920 * 100vw);
      display: flex;
      .course-photo {
        width: calc(37 / 1920 * 100vw);
        height: calc(37 / 1920 * 100vw);
        vertical-align: middle;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: calc(37 / 1920 * 100vw);
          height: calc(37 / 1920 * 100vw);
        }
      }
      div {
        margin: auto calc(10 / 1920 * 100vw);
        font-size: calc(14 / 1920 * 100vw);
        vertical-align: middle;
      }
      .course-follow {
        background-color: #fd5151;
        color: #fff;
        border-radius: calc(20 / 1920 * 100vw);
        padding: calc(5 / 1920 * 100vw) calc(15 / 1920 * 100vw);
        img {
          vertical-align: middle;
        }
        &:hover {
          cursor: pointer;
          background-color: #fa3c3c;
        }
      }
      .course-title {
        width: calc(550 / 1920 * 100vw);
        font-size: calc(26 / 1920 * 100vw);
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }
    }
    .course-content {
      height: calc(100vh - calc(170 / 1920 * 100vw));
      display: flex;
      .course-left {
        flex: 1;
        background-color: #000000;
        position: relative;
        .course-subtitle {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          font-size: calc(14 / 1920 * 100vw);
          font-weight: 500;
          color: #ffffff;
          line-height: calc(40 / 1920 * 100vw);
          padding: 0 calc(40 / 1920 * 100vw);
          background-color: rgba(0, 0, 0, 0.5);
        }
        video {
          width: 100%;
          height: calc(100% - calc(91 / 1920 * 100vw));
          background-color: #1b1b1b;
        }
        .course-footer {
          display: flex;
          justify-content: space-between;
          margin: 0 calc(40 / 1920 * 100vw);
          line-height: calc(90 / 1920 * 100vw);
          > div:first-child {
            width: calc(200 / 1920 * 100vw);
            display: flex;
            justify-content: space-around;
            font-size: calc(14 / 1920 * 100vw);
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            > div:hover {
              cursor: pointer;
              color: #e91401;
            }
          }
          .highLight {
            color: #e91401;
          }
        }
      }
      .course-right {
        width: calc(405 / 1920 * 100vw);
        background-color: #343434;
        .course-progress {
          display: flex;
          justify-content: space-around;
          margin: calc(10 / 1920 * 100vw) 0;
          font-size: calc(14 / 1920 * 100vw);
          color: #ffffff;
        }
        ::v-deep(.ivu-progress) {
          width: 70%;
        }
        ::v-deep(.ivu-progress-inner) {
          background-color: #212121;
        }
        .course-study {
          margin: calc(10 / 1920 * 100vw);
          padding: calc(10 / 1920 * 100vw);
          border-bottom: 1px solid #4c4c4c;
          display: flex;
          font-family: PingFang SC;
          color: #ffffff;
          &:hover {
            cursor: pointer;
            background-color: #2e2e2e;
          }
          > div {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          > div:first-child {
            width: calc(30 / 1920 * 100vw);
            font-weight: bold;
            font-size: calc(17 / 1920 * 100vw);
          }
          > div:nth-child(2) {
            flex: 1;
            span {
              margin: 0 10px 0 5px;
            }
            > div:first-child {
              font-weight: 500;
              font-size: calc(16 / 1920 * 100vw);
            }
            > div:last-child {
              font-weight: 500;
              font-size: calc(12 / 1920 * 100vw);
            }
          }
          > div:last-child {
            margin: auto;
          }
        }
      }
    }
  }
}

::v-deep.ivu-chart-circle {
  width: 18px !important;
  height: 18px !important;
}
</style>
